/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,StatusBar,
    Text,
    View,
    Image,
    BackAndroid
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import CommonStyle from './CommonStyle'
import {Theme, NavigationPage,TeaNavigator, ListRow, NavigationBar, Label, Toast} from 'teaset';
import ControlPage from './Control/Control';
import QYLPage from './QYLPage'
import  MyPage from  './MyPage'
import  BoundPage from  './BoundPage'
import Tool from './Control/Tools'


export default class MainScreen extends NavigationPage {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: '设备',
        }
    }


    componentDidMount() {
        console.log('componentDidMount');
        Theme.set ({fitIPhoneX: true});
    }

    render() {
        return (
            <View style={styles.container}>

                <StatusBar
                    animated={true}
                    hidden={true}

                    translucent={true}
                    barStyle={'default'}
                    showHideTransition={'fade'}
                    networkActivityIndicatorVisible={true}
                />

                <TabNavigator tabBarStyle={
                    {
                        backgroundColor:'#262626'
                    }
                }>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '设备'}
                        title="设备"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./images/kongtiao_close.png")}/>}
                        renderSelectedIcon={() => <Image style={styles.icon}
                                                         source={require("./images/kongtiao.png")}/>}
                        //onPress={() =>this.setHome(home_url,home_title)}>
                        onPress={() => this.setState({selectedTab: '设备'})}>
                        <QYLPage {...this.props}/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '房间'}
                        title="房间"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon}
                                                 source={require("./images/shebei.png")}/>}
                        renderSelectedIcon={() => <Image style={styles.icon}
                                                         source={require("./images/shebei_close.png")}/>}
                        
                        
                        onPress={() => this.setState({selectedTab: '房间'})}>
                        <ControlPage {...this.props}/>

                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon}
                                                 source={require("./images/wode_close.png")}/>}
                        renderSelectedIcon={() => <Image style={styles.icon}
                                                         source={require("./images/wode.png")}/>}
                        //onPress={() =>this.setHome(home_url,home_title)}>
                        onPress={() => this.setState({selectedTab: '我的'})}>

                        <MyPage {...this.props}/>
                    </TabNavigator.Item>

                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginBottom:CommonStyle.iPhoneXBottom ,

    },
    tabText: {
        color: "#999999",
        fontSize: 11
    },
    selectedTabText: {
        color: "#0ECDAC",
        fontSize: 11
    },
    icon: {
        width: 20,
        height: 20
    }
});

AppRegistry.registerComponent('capacity', () => MainScreen);
